<template>
  <div class="common-layout">
    <el-container>
      <!-- 左侧导航 -->
      <el-menu active-text-color="#ffd04b" background-color="#000" default-active="2" text-color="#fff"
        :collapse="isCollapse" class="menu_box">

        <div :width="!isCollapse ? '300px' : '50px'" class="aside_top">后台<span class="span1" v-show="isCollapse == false">管理<span class="span2" v-show="isCollapse == false">系统</span>
          </span>
        </div>
        <el-sub-menu :index="item.id + ''" v-for="(item, index) in menuList" :key="index">
          <template #title>
            <el-icon>
              <component :is="icon[index]"></component>
            </el-icon>
            <!-- <el-icon>
              <Operation />
            </el-icon> -->
            <span>{{ item.authName }}</span>
          </template>
          <el-menu-item :index="ite.id + ''" v-for="(ite, ine) in item.children" :key="ine">{{ ite.authName
          }}</el-menu-item>
        </el-sub-menu>
      </el-menu>
      <el-container>
        <!-- 右侧 -->
        <el-header class="header_box">
          <!-- 右侧头 -->
          <!-- 缩放 -->
          <div class="icon_box" @click="btn_Scale">
            <el-icon>
              <Operation />
            </el-icon>
          </div>

          <div class="console_box">
            <myConsole @selectStyle="selectStyle" @outStyle="outStyle"></myConsole>
          </div>
        </el-header>

        <el-main>Main</el-main>

      </el-container>
    </el-container>

   
  </div>
</template>
<script setup lang="ts">
import { Operation, TurnOff, Menu, Grid, Tools, Cpu, GoodsFilled } from '@element-plus/icons-vue'
import myConsole from '../components/myConsole.vue'
import { MenuApi } from '@/untils/api'
import type { MenuType } from '@/untils/type.docu'
import { onMounted } from 'vue'
let isCollapse = ref(false)
let toggle = ref(false)
let menuList = ref<MenuType[]>([])
const icon: any = ref([Menu, Grid, Tools, Cpu, GoodsFilled])
// 控制缩放
const btn_Scale = () => {
  isCollapse.value = !isCollapse.value
}
onMounted(() => {
  getMeun()
})
const getMeun = async () => {
  let res = await MenuApi()
  console.log(res)
  menuList.value = res.data.data
}

</script>

<style scoped lang="scss">
.aside_top {
  height: 50px;
  // width: 200px;
  background-color: #00bfff;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  color: #fff;
  border-right: 1px solid #000;

  .span2 {
    font-weight: normal;
  }
}

.common-layout {
 
}

.menu_box {
  height: 100vh;
}

.el-header {
  padding: 0 !important;
}

.header_box {
  height: 50px !important;
  background-color: #00bfff;
  display: flex;
  justify-content: start;
  align-items: center;

  .icon_box {
    width: 30px;
    line-height: 50px;
    font-size: 30px;
    margin-left: 20px;
  }

  .console_box {
    width: 100%;
  }
}

.el-menu-vertical-demo {
  height: 100vh;
  width: 300px;
}


</style>
